// Custom styles.
// pages 样式
.post-button {
    text-align: center;
    margin: 20px 0 10px 0;
}

.post-button a {
    margin: none !important;
    border-bottom: none;
}
.post-button a.btn {
    color: #f6f6f6;
    margin: 0 !important;
    background-color: #87daff;
    padding: 1px 6px;
    border-radius: 4px;
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.post-date , .post-date .text-desc{
    background-color: #97dffd;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    position: absolute;
    top: -22px;
    left: -20px;
    height: 55px;
    width: 65px;
    padding-top: 10px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
}

.post-date .text-desc {
    background-color: #fff;
    opacity: 0.6;
    top: -110%;
    left: 0;
    transition: all .7s ease 0s;
    line-height: 3;
    color: #222;
    font-size: 16px;
    font-weight: bold;
}

.post-date:hover .text-desc{
    top: 0;
}

.post-date .post-day , .post-date .post-time-count {
    font-size: 28px;
    font-weight: 700;
}
.post-date .date-text , .post-date .post-year {
    font-size: 12px;
    line-height: 1.1;
}
.post-date .post-year {
    font-size: 14px;
}
.post-date .post-tiem {
    line-height: 1.2;
    color: #000000;
}

.post-badge {
    position: absolute;
    left: -16px;
    top: 130px;
    border-color: #47456d;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #97dffd;
    margin: 5px 0 15px 2px;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
    display: inline-block;
    padding: 7px 11px 7px 32px;
    line-height: 1;
}

.post-badge a {
    border-bottom: none;
    color: #fff;
}

.post-badge:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    border-top: 0 solid transparent;
    border-right-width: 1em;
    border-right-color: inherit;
    border-right-style: solid;
    border-bottom: 1em solid transparent;
    border-left: 0 solid transparent;
    width: 0;
    height: 0;
}

.btn:hover, .post-button .btn:hover {
    // border: 1px solid #eee;
    color: #f6f6f6;
    background: #333333de;
}

//页面进度条样式
#load {
    position: fixed;
    left: 0px;
    top: 0px; height: 2px;
    width: 0px;
    border-radius: 2px;
    background-color: #87daff;
    box-shadow: 0 0 10px #87daff, 0 0 1px #87daff;
    z-index: 9999;
}
#load.header {
    background-color: #333;
    box-shadow: 0 0 10px #333, 0 0 5px #333;
    height: 1px;
}
.scroll_percentage{
  color: #fff;
}
//禁用了包括 hover 在内的鼠标事件，从而提高滚动性能
.disable-hover, .disable-hover * {
  pointer-events: none !important;
}
//分类
.category-all-page .category-list {
    padding-left: 10%;
}
.category-all .category-list-item {
    list-style: none;
    display: inline-block;
    width: 60px;
    height: 120px;
    text-align: center;
    vertical-align: text-bottom;
    position: relative;
    margin: 5px 15px;
}
.category-all .category-list-item:hover {
  cursor: pointer;
}
.category-all .category-list-item a {
    display: inline-block;
    margin-top: 80px;
    border-bottom: none;
    color: #eaeaea;
    font-size: 14px;
}
.category-all .category-list-item::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: 18px;
    left: 5px;
    color: #fff;
    background-size: cover;
    transition: all 0.5s;
    opacity: .7;
}
.category-all .category-list-item:nth-child(1)::before {
  background-image: url("/images/css3.svg");
}
.category-all .category-list-item:nth-child(2)::before {
  background-image: url("/images/js.svg");
}
.category-all .category-list-item:nth-child(3)::before {
  background-image: url("/images/php.svg");
}
.category-all .category-list-item:nth-child(4)::before {
  background-image: url("/images/toolbox.svg");
}
.category-all .category-list-item:nth-child(5)::before {
  background-image: url("/images/chat.svg");
}
.category-all .category-list-item:nth-child(6)::before {
  width: 60px;
  height: 60px;
  top: 10px;
  left: -2px;
  background-image: url("/images/knowledge.svg");
}
.category-all .category-list-item:nth-child(7)::before {
  width: 55px;
  height: 55px;
  top: 12px;
  left: 0;
  background-image: url("/images/category/Optimize.svg");
}
.category-all .category-list-item:nth-child(8)::before {
  width: 45px;
  height: 45px;
  left: 6px;
  background-image: url("/images/category/photography.svg");
}
.category-all .category-list-item:nth-child(9)::before {
  background-image: url("/images/category/design.svg");
}
.category-all .category-list-item:hover::before {
    transform: scale(1.1);
}

//tags child
.collection-title-per h2 , .collection-title-per h2{
    font-size: 30px;
    color: #87daffed;
    text-align: center;
    margin-bottom: 40px;
}
.collection-title-per h2 span , .collection-title-per h2 span{
    font-size: 14px;
    color: #f5f5f5;
}
//tags and archive
.tag-cloud-tags a {
    background-color: rgba(135,218,255,0.102);
    border: 1px solid rgba(135,218,255,0.141);
    color: #eaeaea;
    padding: 0 12px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(135,218,255,0.38);
    margin: 6px 8px 0 0;
    line-height: 1.6;
    transition: all .5s;
}

.tag-cloud-tags a:hover{
    background-color: #87daffc7;
    box-shadow: 0 0 6px #f6f6f6;
}

.tag-cloud-title , .category-all-title {
    font-size: 18px;
    font-weight: bold;
    color: #f0f0f0;
    margin: 10px auto;
}
.archive {
    margin-top: 50px;
}
.posts-collapse {
    z-index: 88;
}
.posts-collapse::after {
    left: 81px;
    width: 1px;
    background: #f5f5f570;
}
.archive .posts-collapse .archive-move-on , .tag .posts-collapse .archive-move-on , .category .posts-collapse .archive-move-on {
    left: 76px;
    top: 2px;
    width: 16px;
    height: 16px;
}

.archive .archive-page-counter , .tag .archive-page-counter , .category .archive-page-counter{
    left: 111px;
    top: -3px;
}
.archive .posts-collapse .collection-title , .tag .posts-collapse .collection-title , .category .posts-collapse .collection-title{
    margin: 20px 0;
    left: -1px;
}
.archive .posts-collapse .collection-title::before , .tag .posts-collapse .collection-title::before , .category .posts-collapse .collection-title::before {
    left: 78px;
    width: 12px;
    height: 12px;
}
.archive .collection-title .archive-year , .tag .collection-title .archive-year , .category .collection-title .archive-year {
      margin-left: 10px;
}
.archive .posts-collapse .post , .tag .posts-collapse .post , .category .posts-collapse .post {
  margin: 5px 0;
  padding: 8px;
}
.archive .posts-collapse .post-header , .tag .posts-collapse .post-header , .category .posts-collapse .post-header {
    border-bottom: none;
    transition: all 5s;
}
.archive .posts-collapse .post-header::before , .tag .posts-collapse .post-header::before , .category .posts-collapse .post-header::before {
    left: 71px;
    top: 12px;
    width: 6px;
    height: 6px;
    background: #555;
    border: 1px solid #ccc;
    transition: all .5s;
}
.archive .posts-collapse .post-title , .tag .posts-collapse .post-title  , .category .posts-collapse .post-title{
    margin: 0 0 0 100px;
    font-size: 16px;
    font-weight: normal;
    line-height: inherit;
}

.archive .posts-collapse .post-title a span.archive-updated , .archive .posts-collapse .post-title a span.leancloud_visitors {
    position: absolute;
    right: 95px;
    top: 4px;
    font-size: 12px;
    color: #edededb0;
}
.archive .posts-collapse .post-title a span.leancloud_visitors {
    right: 0;
}
// .archive .posts-collapse .post-title a span.leancloud_visitors .leancloud-visitors-count {
//     color: #ff000091;
//     font-weight: bold;
// }
// .archive .posts-collapse .post-title a span.archive-updated time.updated {
//     color: #87daffa8;
//     font-weight: bold;
// }

@media (max-width: 991px) and (min-width: 768px) {
  .archive .posts-collapse .post-title a span.archive-updated {
    right: 70px;
  }
  .post-meta-item-text {
      display: none;
  }
}

.archive .posts-collapse .post-title a , .tag .posts-collapse .post-title a , .category .posts-collapse .post-title a {
    color: #f6f6f6;
    transition: all .5s;
}
.archive .posts-collapse .post-meta time , .tag .posts-collapse .post-meta time , .category .posts-collapse .post-meta time {
    transition: all .5s;
}

.archive .posts-collapse .post-header:hover , .tag .posts-collapse .post-header:hover , .category .posts-collapse .post-header:hover {
    border-bottom: none;
}

.archive .posts-collapse .post-header:hover a , .tag .posts-collapse .post-header:hover a , .category .posts-collapse .post-header:hover a {
    color: #87daff;
}
.archive .posts-collapse .post-header:hover time , .tag .posts-collapse .post-header:hover time , .category .posts-collapse .post-header:hover time {
    color: #87daff;
}
.archive .posts-collapse .post-header:hover::before , .tag .posts-collapse .post-header:hover::before , .category .posts-collapse .post-header:hover::before {
    transform: scale(1.5);
    background: #87daff;
}
.archive .posts-collapse .post-header:hover .leancloud-visitors-count {
    color: red;
}
.post-block.tag , .post-block.category {
    padding-top: 50px;
}
.posts-collapse .collection-title h2 {
    margin-left: 108px;
}

// 评论 icon
.vhead .vsys img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    display: inline;
    margin-top: -2px;
    margin-right: 5px;
}
.vhead .vsys img.Safari {
    width: 18px;
    height: 18px;
}
.vhead .vsys img.Windows10 , .vhead .vsys img.Chrome {
    width: 12px;
    height: 12px;
}
.vhead .vsys img.Windows7 , .vhead .vsys img.Android , .vhead .vsys img.Firefox , .vhead .vsys img.Linux ,.vhead .vsys img.sogou {
    width: 14px;
    height: 14px;
}

.local-search-pop-overlay {
    z-index: 98;
}

.local-search-popup {
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
}

.local-search-popup .local-search-header.search-middle {
    position: relative;
    top: 42%;
    width: 50%;
    border-radius: 10px;
    margin: 0 auto;
    z-index: 10000;
    padding: 15px;
}

.popup.search-popup.local-search-popup {
    visibility: visible;
    overflow: hidden;
    opacity: .99;
    animation: eleZoom .5s;
    -webkit-transition: visibility .25s ease,opacity .25s ease;
    -moz-transition: visibility .25s ease,opacity .25s ease;
    -ms-transition: visibility .25s ease,opacity .25s ease;
    -o-transition: visibility .25s ease,opacity .25s ease;
    transition: visibility .25s ease,opacity .25s ease;
}

@keyframes eleZoom{
  0% {
      transform: scale(0);
  }
  55% {
      transform: scale(1);
  }

  70% {
      transform: scale(.98);
  }
  100% {
      transform: scale(1);
  }
}

//修改 边距
.main {
    margin-top: 100px;
}

//固定 header
.header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s;
    z-index: 99;
}
.github-corner {
    position: fixed;
    left: 0;
    top: 0px;
    z-index: 100;
}
.header-inner {
    padding: 4px 0;
}

.header-inner .site-meta {
    margin-top: 4px;
}

.header.light-header {
    background: #87daffe3;
    box-shadow: 0.06rem 0.06rem 0.1rem #87daff, -0.06rem 0 0.06rem #87daff;
}

.header-has-sidebar {
  width: calc(100% - 220px);
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes slideOutUp{
  0% {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
  }

  100% {
      visibility: hidden;
      -webkit-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
  }
}

@keyframes slideInDown{
  0% {
      -webkit-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
      visibility: visible;
  }

  100% {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
  }
}

//评论样式

.v .vlist .vcard .vhead .bozhu {
    font-size: 12px;
    margin-right: 10px;
    color: #fff;
    background: #78c3e5;
    border-radius: 2px;
    padding: 0 3px;
    box-shadow: 0 0 7px #78c3e5;
    border: 1px solid #f6f6f629;
    font-weight: bold;
}

.content-wrap .comments {
  margin: 0;
}

.content-wrap .comments  .comments {
  background: #fff;
  border-radius: 4px;
  padding: 5px;
}

.comments .comments.no-post {
  background: transparent !important;
}
.comments .comments.no-post .v {
  color: #ddd !important;
}

.comments .comments.no-post .v .vwrap {
  border: 1px solid #f0f0f0a3;
}

::selection {
  background: #00a77bde;
  color: #ffffff;
  font-weight: bold;
}

// links页面样式
.per-link-page ,.per-guestbook-page {
  margin: 20px auto 50px;
}

.per-link-page hr , .per-guestbook-page hr{
  background-color: #cccccc1f;
  background-image: repeating-linear-gradient(-45deg, #ffffff3b, #ffffff33 1px, transparent 4px, transparent 5px);
  height: 1px;
}

.per-link-page .instructions , .per-guestbook-page .instructions {
  font-size: 13px;
  color: #ddd;
}

.per-link-page .per-links {
    padding: 0;
    margin: 0 0 80px;
    text-align: center;
    overflow: auto;
    list-style-type: none;
}
.per-link-page .per-links .per-links-item {
    list-style: none;
    background: #fff0;
    // border: 1px solid rgba(204, 204, 204, 0.2);
    float: left;
    margin: 20px 5px;
    width: 275px;
    color: #f5f5f5;
    // box-shadow: 0 2px 15px 0 rgba(249, 246, 246, 0.1), 0 3px 10px -2px rgba(247, 244, 244, 0.1), 0 1px 10px 0 rgba(251, 248, 248, 0.1);
    height: 72px;
    line-height: 15px;
}
.per-link-page .per-links .per-links-item {
    transition: all .2s linear;
}
.per-link-page .per-links .per-links-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 15px 0 rgba(249, 246, 246, 0.1), 0 3px 10px -2px rgba(247, 244, 244, 0.1), 0 1px 10px 0 rgba(251, 248, 248, 0.1);
    border-radius: 6px;
}
.per-link-page .per-links .per-links-item::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 2px;
    overflow: hidden;
}
.per-link-page .per-links .per-links-item:hover::before {
    box-shadow: 0 7px 15px #f6f6f622
}

// .per-link-page .per-links .per-links-item:hover {
//     box-shadow: 0 4px 20px 2px rgba(251, 248, 248, 0.3);
// }

.per-link-page .per-links .per-links-item  a {
    display: block;
    height: 100%;
    color: #ddd;
    text-decoration: none;
    border: none;
    position: relative;
}

.per-link-page .per-links .per-links-title {
    font-size: 16px;
    line-height: 45px;
    margin: 0 5px 0 72px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.per-link-page .per-links .per-links-des {
    font-size: 14px;
    margin: 0 5px 0 72px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.per-link-page .per-links .per-links-icon {
    width: 72px;
    height: 72px;
    fill: currentColor;
    overflow: hidden;
    position: absolute;
    left: 0;
    z-index: 1;
    border-radius: 50%;
}

//guestbook 页面
.per-guestbook-page .instructions.title {
    font-size: 14px;
    padding-top: 20px;
}

.per-guestbook-page .instructions .color-box {
    display: inline-flex;
    position: relative;
    top: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 0 4px;
}
.per-guestbook-page .instructions .color-box.white {
    background-color: #ddd;
}
.per-guestbook-page .instructions .color-box.black {
    background-color: #000;
}
.per-guestbook-page .instructions .color-box.blue {
    background-color: #87daff;
}

.per-guestbook-page .instructions .color-box.red {
    background-color: #ef2f11;
}

.per-guestbook-page .mark-main {
    font-size: 16px;
    font-weight: bold;
    color: #87daff;
}
.per-guestbook-page .mark-secondary {
    font-size: 14px;
    font-weight: bold;
    color: #87daff;
}

blockquote {
  color: #bbb;
}

// 修改背景
// body {
//     background-image: url(/images/bg.jpg);
//     background-repeat: repeat;
//     will-change: auto;
//     // background-attachment: fixed;
//     // background-position: 50% 50%;
// }

body{
  background-color: #000;
  text-shadow: 0 0 1px rgba(0,0,0,.1);
}

body::before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  will-change: transform;
  z-index: -100;
  background-image: url(/images/bg.jpg);
  background-repeat: repeat;
}

// body {
//     background-image: url(/images/back.jpg);
//     background-position: center center;
//     background-size: cover;
//     background-repeat: no-repeat;
//     background-attachment: fixed;
// }

.posts-expand .post {
    margin-top: 120px;
    background: #fff;
    border-radius: 4px;
}

section.posts-expand .post {
    box-shadow: 0 0 30px #ffffff54;
    border-radius: 4px;
}


.post-block.page , .post-block.page a , .posts-collapse , .posts-collapse a {
    color: #fff;
}

posts-collapse .post-title a {
    color: #aaa;
}

.header {
    background: transparent;
}

.header.dark .custom-logo-site-title .brand {
    color: #f6f6f6;
}

.header.dark .logo-line-before i, .header.dark .logo-line-after i {
    background: #f6f6f6;
}

.menu {
    margin: 8px 8px;
}

.menu .menu-item a {
  font-size: 13px;
  font-weight: bold;
}

.menu .menu-item a:hover {
    background: none;
    // color: #fff;
}

.menu .menu-item a::after{
    position: absolute;
    content: '';
    top: 150%;
    left: 28%;
    margin: -0.64285714em 0 0 -0.64285714em;
    width: 75%;
    max-width: 0;
    height: 1px;
    border-radius: 10px;
    background: #333333e0;
    transition: max-width .25s ease-in-out;
}

.menu .menu-item a:hover::after{
    max-width: 80%;
}

// .menu .menu-item.menu-item-active a {
//   background: rgba(34, 34, 34, 0.86);
//   color: #fff;
// }

.menu .menu-item.menu-item-active a::after {
    max-width: 80%;
}

.header.dark .menu .menu-item a {
    color: #f6f6f6;
    font-size: 13px;
    font-weight: bold;
}

.header.dark .menu .menu-item a:hover {
    color: #fff;
}

.header.dark .menu .menu-item a:hover::after {
    background: #fff;
}

// .header.dark .menu .menu-item.menu-item-active a {
//     background: rgba(255, 255, 255, 0.83);
//     color: #222;
// }
.header.dark .menu .menu-item.menu-item-active a::after {
    background: #fff;
}

.pagination {
    margin: 120px 0 40px;
    text-align: center;
    border-top: 1px solid #aaaaaa73;
}

.pagination .prev, .pagination .next, .pagination .page-number {
    border-top: 1px solid rgba(170, 170, 170, 0.46);
}

nav.pagination a:hover {
    color: #fff;
    background: #33333396;
}

.pagination .page-number.current {
    color: #fff;
    background: #33333396;
}

.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
}

.footer {
    background: transparent;
    color: #ccc;
}

.footer a {
    color: #f5f5f5;
    text-decoration: none;
}

.footer a:hover {
    border-bottom-color: #f5f5f5;
}

.footer .footer-inner .copyright .fa-heart {
    color: #ef2f11;
}

.sidebar {
    background: #22222280;
}

.btn-bar {
    background: #f6f6f6;
}

.posts-collapse .post-title a {
    color: #999;
}

.posts-collapse .post-title a:hover {
    color: #f6f6f6;
}

.posts-collapse .post-header {
    border-bottom: 1px dashed #555;
}

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

  .post-body p a {
    color: #0593d3;
    border-bottom: none;
    &:hover {
        color: #0477ab;
        text-decoration: underline;
    }
}
//去掉 button 的 蓝色框
iframe button:focus {
    outline: none !important;
}

//修改 赏 的样式
#rewardButton {
    box-shadow: 0px 0px 5px 0px #f70543;
    border: 1px solid #fb4e4ef2;
    margin-top: 20px;
}

#rewardButton span {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 16px;
    background: #d70037;
}

#rewardButton span:hover {
    background: #fd2d62;
    box-shadow: 0px 0px 15px 0px #fd2d62;
}

//修改评论框 border
#container .wf-form, #container .popup-quotation .quotation-wf .quotation-text {
    border: 1px solid #bbb;
}

#container button.wf-write-btn,
#container .popup-quotation .quotation-wf-group .quotation-wf-right button.quotation-write-btn,
#container button.fake-write-btn {
    background: #222222e0;
}

.my_post_copyright {
    margin: 4em 1.5em;
}

//修改 tags
.posts-expand .post-tags a {
    margin: 3px 1px 0;
    border-radius: 2px;
}

//修改 归档
.posts-collapse .post.post-type-normal {
    box-shadow: 0 0 5px rgba(202, 203, 203, 0);
    webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0);
    -moz-box-shadow: 0 0 5px rgba(202,203,204,0);
}

hr {
    margin: 40px 0;
    border: none;
    background-color: #ccc;
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 2px, transparent 4px, transparent 4px);
}

// pages-end 样式
.line.pages-end {
    height: 1px;
    width: 85%;
    margin-left: 7.5%;
    // border-top: 2px solid #f5f5f5;
    text-align: center;
    margin-top: 50px;
    border: none;
    background-color: #ccc;
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 2px, transparent 4px, transparent 4px);
}

.line.pages-end span {
    position: relative;
    top: -16px;
    background: #ffffff;
    padding: 0 15px;
    color: #bbb;
    font-size: 12px;
}

// 当改变图片大小时候，修改margin
.posts-expand .post-body img:not(.full-image) {
    margin: 0 auto;
    box-shadow: 1px 1px 15px #33333347;
    border: none;
}

.posts-expand .post-body img[alt=no-shadow] {
    margin: 0 auto;
    box-shadow: none
    border: none;
}

.post-gallery .post-gallery-img img {
    box-shadow: none!important;
    border: none!important;
}

.post-body .image-caption, .post-body .figure .caption {
    font-size: 12px;
}

.post-gallery {
    margin: 0 0 30px;
}

.posts-expand .post-meta, .posts-expand .post-title {
  text-align: center;
}

kbd {
    border: 1px solid #333;
    padding: 4px;
    border-radius: 4px;
    background-color: #222;
    color: #fff;
    box-shadow: 0 0 2px #222222;
}

b, strong {
    color: #87daff;
    font-size: 104%;
    text-shadow: none;
}

//修改 code 样式
code {
    // color: #d70037;
    // background: #fbf0f0;
    // border-radius: 2px;
    // box-shadow: 0 0 2px #fdb9b9;
    color: #005098fc;
    background: #87daffb8;
    border-radius: 4px;
    box-shadow: 0 0 2px #87daff;
    font-size: 90%;
}

.highlight {
    // border-radius: 2px;
    box-shadow: 0 0 3px #101010;
    margin: 25px -3%;
}

.highlight figcaption {
    font-size: 14px;
    color: rgba(0, 167, 123, 0.72);
    margin: 10px;
}
.highlight figcaption a {
    float: right;
    color: #bbb;
    border-bottom: none;
    font-size: 14px;
}

.highlight td {
    background-color: #222;
}

.highlight table {
    margin: 25px;
}

.highlight table>tbody>tr:nth-of-type(odd){
    background-color: #222;
}

pre, .highlight {
    background: #222222;
}

.highlight .code pre {
    background: #222222;
}

.highlight .gutter pre {
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
}

//修改 li 为实现圆点
.posts-expand .post-body ul li {
    list-style: disc;
}

.post-body p a:hover {
    text-decoration:none;
}

//div 居中

.per-m-auto {
    margin: 0 auto;
    width: 40%;
}

.per-table {
    border: none;
    margin: 0;
}

.per-table>tbody>tr:nth-of-type(odd){
    background-color: #fff;
}

.per-table>tbody>tr>td:first-child{
    text-align: right;
}

.per-table td, .per-table th{
    background-color: #fff;
    border: none;
    padding: 1px;
}

.post-body .note.success,
.post-body .note.default,
.post-body .note.primary,
.post-body .note.success,
.post-body .note.info,
.post-body .note.warning,
.post-body .note.danger {
    margin: 25px -3%;
}

.my_post_copyright a:hover {
    color: #87daff;
}

//loader
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#loader>div {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid #e8d8d800;
    border-top-color: #e85656;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader>div:after, #loader>div:before {
    content: "";
    position: absolute;
}

#loader>div:before {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #209e91;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader>div:after {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #87daff;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 1600px) {
    .full-image.full-image.full-image {
        max-width: none;
        width: 106.6%;
        margin: 25px -3.3%;
        margin-bottom: 0px;
    }

    .post-body .highlight {
        width: 106%;
        margin: 25px -3%;
    }

    .posts-expand .post-body>table {
        width: 105%;
        margin: 25px -2.5%;
    }

    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -2.92%;
    }
}


// iPad pro
@media screen and (min-width: 992px) and (max-width: 1599px) {
    .container .header-inner {
        width: 900px;
    }
    .full-image.full-image.full-image {
        width: 108.55%;
        margin: 25px -4.28%;
        margin-bottom: 0px;
    }
    .post-body .highlight {
        width: 108%;
        margin: 25px -4%;
    }

    .posts-expand .post-body>table  {
        width: 107%;
        margin: 25px -3.5%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -3.9%;
    }

    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px 30px;
    }
    .category-all-page .category-list {
      padding-left: 7%;
    }
}
//ipad
@media screen and (min-width: 768px) and (max-width: 991px) {
    .full-image.full-image.full-image {
        max-width: none;
        width: 109%;
        margin: 25px -4.5%;
        margin-bottom: 0px;
    }
    .github-corner {
        display: none;
    }
    .post-body .highlight ,{
        width: 108%;
        margin: 25px -4%;
    }

    .posts-expand .post-body>table  {
        width: 107%;
        margin: 25px -3.5%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -3.9%;
    }

    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px 30px;
    }

    .menu .menu-item a , .header.dark .menu .menu-item a {
      font-size: 12px;
    }
    .category-all-page .category-list {
      padding-left: 7%;
    }
}

// iphone 6/7/8..puls
@media screen and (min-width: 414px) and (max-width: 767px) {
    body {
        background-color: #222;
    }
    body::before {
        content: none;
        background-image: none;
    }
    .full-image.full-image.full-image {
        max-width: none;
        width: 117%;
        margin: 25px -8.5%;
        margin-bottom: 0px;
    }
    .github-corner {
        display: none;
    }
    .my_post_copyright {
        margin: 3em 0em;
    }
    .post-body .highlight {
        width: 116%;
        margin: 25px -8%;
    }
    .posts-expand .post-body>table {
        width: 115%;
        margin: 25px -7.5%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -7.9%;
    }
    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px auto;
      float: none;
    }
    .content-wrap .comments .comments {
      margin: 0;
    }
    .content-wrap .comments {
      margin: 20px 20px 0;
    }

    .menu .menu-item a:hover::after{
        content: none
    }

    .menu .menu-item.menu-item-active a {
      background: rgba(34, 34, 34, 0.86);
      color: #fff;
    }

    .menu .menu-item.menu-item-active a::after {
        content: none;
    }

    .header.dark .menu .menu-item.menu-item-active a {
        background: rgba(255, 255, 255, 0.83);
        color: #222;
    }

    .local-search-popup .local-search-header.search-middle {
        width: 80%;
        padding: 8px;
    }
    .category-all-page .category-list {
        padding-left: 8%;
    }
    .archive .posts-collapse .post-title a span.archive-updated , .archive .posts-collapse .post-title a span.leancloud_visitors {
      display: none;
    }
    .post-date {
        top: -22px;
        left: -20px;
        height: 50px;
        width: 60px;
        padding-top: 10px;
    }
    .post-date .text-desc {
        width: 60px;
    }
    .post-date .post-day {
        font-size: 26px;
    }
}

@media screen and (min-width: 450px) and (max-width: 767px) {
    .full-image.full-image.full-image {
        max-width: none;
        width: 111%;
        margin: 25px -5.5%;
        margin-bottom: 0px;
    }
    .post-body .highlight , .posts-expand .post-body>table {
        width: 108%;
        margin: 25px -4%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger{
        margin: 25px -3.9%;
    }

    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px auto;
      float: none;
    }
    .content-wrap .comments .comments {
      margin: 0;
    }
    .content-wrap .comments {
      margin: 20px 20px 0;
    }
    .header-inner {
        margin-bottom: 0px;
    }

    .menu .menu-item a:hover::after{
        content: none
    }

    .menu .menu-item.menu-item-active a {
      background: rgba(34, 34, 34, 0.86);
      color: #fff;
    }

    .menu .menu-item.menu-item-active a::after {
        content: none;
    }

    .header.dark .menu .menu-item.menu-item-active a {
        background: rgba(255, 255, 255, 0.83);
        color: #222;
    }
    .local-search-popup .local-search-header.search-middle {
        width: 80%;
        padding: 8px;
    }
    .category-all-page .category-list {
        padding-left: 8%;
    }
    .archive .posts-collapse .post-title a span.archive-updated , .archive .posts-collapse .post-title a span.leancloud_visitors {
      display: none;
    }
    .post-date {
        top: -22px;
        left: -20px;
        height: 50px;
        width: 60px;
        padding-top: 10px;
    }
    .post-date .text-desc {
        width: 60px;
    }
    .post-date .post-day {
        font-size: 26px;
    }
}

@media (max-width: 767px){
  .header-inner {
      margin-bottom: 0px;
  }

  .header.dark .site-nav {
      background: #333333d4;
      padding-bottom: 2px;
  }
}

// iphone 6/7/8
@media screen and (min-width: 375px) and (max-width: 413px) {
    body {
        background-color: #222;
    }
    body::before {
        content: none;
        background-image: none;
    }
    .full-image.full-image.full-image {
        max-width: none;
        width: 119.5%;
        margin: 25px -9.75%;
        margin-bottom: 0px;
    }
    .github-corner {
        display: none;
    }
    .my_post_copyright {
        margin: 3em 0em;
    }
    .post-body .highlight {
        width: 118%;
        margin: 25px -9%;
    }

    .posts-expand .post-body>table {
        width: 117%;
        margin: 25px -8.5%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -8.9%;
    }

    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px auto;
      float: none;
    }
    .content-wrap .comments .comments {
      margin: 0;
    }
    .content-wrap .comments {
      margin: 20px 20px 0;
    }

    .menu .menu-item a:hover::after{
        content: none
    }

    .menu .menu-item.menu-item-active a {
      background: rgba(34, 34, 34, 0.86);
      color: #fff;
    }

    .menu .menu-item.menu-item-active a::after {
        content: none;
    }

    .header.dark .menu .menu-item.menu-item-active a {
        background: rgba(255, 255, 255, 0.83);
        color: #222;
    }

    .local-search-popup .local-search-header.search-middle {
        width: 80%;
        padding: 8px;
    }
    .category-all-page .category-list {
        padding-left: 4%;
    }
    .archive .posts-collapse .post-title a span.archive-updated , .archive .posts-collapse .post-title a span.leancloud_visitors {
      display: none;
    }
    .post-date {
        top: -22px;
        left: -20px;
        height: 50px;
        width: 60px;
        padding-top: 10px;
    }
    .post-date .text-desc {
        width: 60px;
    }
    .post-date .post-day {
        font-size: 26px;
    }

}
// iphone 5
@media screen and (max-width: 374px) {
    body {
        background-color: #222;
    }
    body::before {
        content: none;
        background-image: none;
    }
    .full-image.full-image.full-image {
        max-width: none;
        width: 125%;
        margin: 25px -12.6%;
        margin-bottom: 0px;
    }
    .github-corner {
        display: none;
    }
    .my_post_copyright {
        margin: 3em 0em;
    }
    .post-body .highlight , .posts-expand .post-body>table {
        width: 123%;
        margin: 25px -11.5%;
    }
    .post-body .note.success,
    .post-body .note.default,
    .post-body .note.primary,
    .post-body .note.success,
    .post-body .note.info,
    .post-body .note.warning,
    .post-body .note.danger {
        margin: 25px -11.4%;
    }

    .pagination .prev, .pagination .next, .pagination .page-number {
        border-bottom: none;
    }

    .per-link-page .per-links .per-links-item {
      margin: 20px auto;
      float: none;
    }
    .content-wrap .comments .comments {
      margin: 0;
    }
    .content-wrap .comments {
      margin: 20px 20px 0;
    }

    .menu .menu-item a:hover::after{
        content: none
    }

    .menu .menu-item.menu-item-active a {
      background: rgba(34, 34, 34, 0.86);
      color: #fff;
    }

    .menu .menu-item.menu-item-active a::after {
        content: none;
    }

    .header.dark .menu .menu-item.menu-item-active a {
        background: rgba(255, 255, 255, 0.83);
        color: #222;
    }

    .local-search-popup .local-search-header.search-middle {
        width: 80%;
        padding: 8px;
    }
    .category-all-page .category-list {
        padding-left: 2%;
    }
    .archive .posts-collapse .post-title a span.archive-updated , .archive .posts-collapse .post-title a span.leancloud_visitors {
      display: none;
    }
    .post-date {
        top: -22px;
        left: -20px;
        height: 50px;
        width: 60px;
        padding-top: 10px;
    }
    .post-date .text-desc {
        width: 60px;
    }
    .post-date .post-day {
        font-size: 26px;
    }
}


